<template>
  <div class="ItemNumberSelection">
    <a-row>
      <a-col :span="5">
        <div class="queryCriteria">
          <div class="queryInput">
            <a-input-search v-model="searchKey" placeholder="输入类别名称进行定位" />
          </div>

          <a-tree :data="treeData" show-line @select="selectLeaf">
            <template #title="nodeData">
              <template v-if="((index = getMatchIndex(nodeData?.title)), index < 0)">{{ nodeData?.title }}</template>
              <span v-else>
                {{ nodeData?.title?.substr(0, index) }}
                <span style="color: var(--color-primary-light-4)"> {{ nodeData?.title?.substr(index, searchKey.length) }} </span
                >{{ nodeData?.title?.substr(index + searchKey.length) }}
              </span>
            </template>
          </a-tree>
        </div>
      </a-col>
      <a-col :span="19">
        <div class="tableWrapper">
          <a-row>
            <a-col :span="6">
              <a-select v-model="type" @change="changeQueryTip">
                <a-option value="1" selected>快捷查询</a-option>
                <a-option value="2">品名</a-option>
                <a-option value="3">品号</a-option>
                <a-option value="4">规格</a-option>
                <a-option value="5">快捷码</a-option>
              </a-select>
            </a-col>
            <a-col :span="10">
              <a-input-search v-model="queryInfo" search-button class="queryItem" :placeholder="quickQueryTip" @search="getTableData" />
            </a-col>
          </a-row>

          <div class="tableContent">
            <vxe-table
              v-if="tabelDom"
              ref="tableRef"
              border
              size="mini"
              :row-config="{ isCurrent: true, isHover: true, keyField: 'id' }"
              :checkbox-config="{ checkRowKeys: selectedRowKeys, highlight: true }"
              :column-config="{ isCurrent: true }"
              :edit-config="{ trigger: 'click', mode: 'cell' }"
              :data="tabelDom"
              :menu-config="menuConfig"
              @menu-click="contextMenuClickEvent"
              @checkbox-all="selectAllChangeEvent"
              @checkbox-change="selectChangeEvent"
            >
              <vxe-column type="checkbox" width="50"></vxe-column>
              <vxe-column title="品号" width="200" align="center">
                <template #default="{ row }">
                  {{ row?.mb001 }}
                </template>
              </vxe-column>
              <vxe-column title="品名" min-width="320" align="center">
                <template #default="{ row }">
                  {{ row?.mb002 }}
                </template>
              </vxe-column>
              <vxe-column title="规格" min-width="400" align="center">
                <template #default="{ row }">
                  {{ row?.mb003 }}
                </template>
              </vxe-column>
              <vxe-column title="库存单位" width="80" align="center">
                <template #default="{ row }">
                  {{ row?.mb004 }}
                </template>
              </vxe-column>
              <vxe-column title="商品描述" width="220" align="center">
                <template #default="{ row }">
                  {{ row?.mb009 }}
                </template>
              </vxe-column>
              <vxe-column title="仓库" width="100" align="center">
                <template #default="{ row }">
                  {{ row?.mb017 }}
                </template>
              </vxe-column>
              <vxe-column title="计划人员" width="120" align="center">
                <template #default="{ row }">
                  {{ row?.mb018 }}
                </template>
              </vxe-column>
              <vxe-column title="产品图号" width="120" align="center">
                <template #default="{ row }">
                  {{ row?.mb029 }}
                </template>
              </vxe-column>
              <vxe-column title="标准售价" width="120" align="center">
                <template #default="{ row }">
                  {{ row?.mb047 }}
                </template>
              </vxe-column>
              <vxe-column title="快捷码" width="200" align="center">
                <template #default="{ row }">
                  {{ row?.mb110 }}
                </template>
              </vxe-column>
            </vxe-table>
          </div>

          <vxe-pager
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.pageSize"
            background
            :total="pagination.total"
            :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'FullJump', 'Total']"
            @page-change="getTableData"
          >
          </vxe-pager>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import importConfig from './ItemNumberSelection';
import { toRefs } from 'vue';
export default {
  setup() {
    const {
      base,
      treeData,
      menuConfig,
      contextMenuClickEvent,
      selectAllChangeEvent,
      selectChangeEvent,
      selectLeaf,
      getTableData,
      getMatchIndex,
      changeQueryTip,
    } = importConfig();

    return {
      ...toRefs(base),
      treeData,
      menuConfig,
      contextMenuClickEvent,
      selectAllChangeEvent,
      selectChangeEvent,
      selectLeaf,
      getTableData,
      getMatchIndex,
      changeQueryTip,
    };
  },
};
</script>

<style lang="less" scoped>
.ItemNumberSelection {
  max-height: calc(100vh - 200px);
  overflow-y: hidden;
  box-sizing: border-box;

  .queryCriteria {
    max-height: calc(100vh - 200px);
    overflow-y: auto;

    .queryInput {
      width: 95%;
      margin-bottom: 15px;
    }

    :deep(.arco-tree) {
      max-height: calc(100vh - 250px);
      overflow-y: auto;
    }
  }

  .tableWrapper {
    max-height: calc(100vh - 200px);

    .tableContent {
      max-height: calc(100vh - 305px);
      overflow-y: auto;

      :deep(.vxe-table) {
        width: 2300px;
        overflow-x: hidden;
      }
    }

    .queryItem {
      margin-bottom: 10px;
      margin-left: 15px;
    }

    :deep(.vxe-pager) {
      margin-top: 15px;
    }
  }
}
</style>
